import React, { useEffect, useRef, useState } from "react";
import { Dimensions, Image, Text, TouchableOpacity, View, StyleSheet } from "react-native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";


export default function(props) {

  const item = props.item;
  const _onPress = () => {
    props.onPress(props.item);
  };
  const ico = props.own?'playlist-remove':'playlist-plus';
  function pressIco(e){
    if(props.own){
      e.stopPropagation();
      //console.log('remove',item);
      props.del(item);
    }else {
      props.addToList(item);
    }
  }
  return (
    <TouchableOpacity onPress={_onPress}>
      <View style={styles.item}>
        {item.img && !props.isAlbum?
          <Image
            roundAsCircle={true}
            source={{uri:item.img}}
            style={{width: 60, height: 60, borderRadius: 6}}
          />
          :
          <View/>
        }

        <View style={styles.layoutText}>
          <Text style={styles.itemTitle} numberOfLines={1}>
            {item['name']}
          </Text>
          <Text style={styles.itemSubTitle} numberOfLines={1}>
            {item.singer}
          </Text>
        </ View>
        {!props.more  && !item.IamAlbum &&
          <TouchableOpacity style={{ marginRight: 10 }} onPress={pressIco}>
            <MaterialCommunityIcons size={30} name={ico} />
          </TouchableOpacity>
        }
        {/* <TouchableNativeFeedback onPress={this._onPress}>
          <View
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: screen.width -20,
              height:60,
            }}
          />
        </TouchableNativeFeedback> */}
      </View>
    </TouchableOpacity>
  );

}

const screen = Dimensions.get('window');
const styles = StyleSheet.create({
  item: {
    flex: 1,
    flexDirection: 'row',
    //backgroundColor: "#eeeeee",
    justifyContent: 'space-around', // 子元素沿主轴的对齐方式
    marginHorizontal: 10,
    marginVertical: 5,
    //padding: 10,
    // borderRadius: 4,    // 圆角
    // shadowColor: 'grey', // 添加阴影效果
    shadowOffset: {width: 1, height: 1},
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,  // android端要加上这个属性，不然阴影不出来
  },
  layoutText: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    marginLeft: 10,
    overflow: 'hidden'
    //padding: 10
  },
  itemTitle: {
    fontSize: 16,
  },
  itemSubTitle: {
    fontSize: 14,
    color: '#aaaaaa',
    marginTop: 2,
  },
});

